<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>万圣节官网</title>
  <!-- 引入icon -->
  <link rel="shortcut icon" href="./assets/img/favicon.png" type="image/x-icon">
  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
  <!-- 引入swiper css -->
  <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css">
  <!-- 引入css -->
  <link rel="stylesheet" href="./assets/css/styles.css">
</head>

<body>
  <!-- 头部区域 -->
  <header class="header" id="header">
    <nav class="nav container">
      <!-- logo -->
      <div class="nav-logo">
        <img src="./assets/img/logo.png" class="nav-logo-img">Halloween
      </div>

      <!-- menu 菜单 -->
      <div class="nav-menu" id="nav-menu">
        <ul class="nav-list">
          <li class="nav-item">
            <a href="#home" class="nav-link nav-link_active">Home</a>
          </li>
          <li class="nav-item">
            <a href="#about" class="nav-link">About</a>
          </li>
          <li class="nav-item">
            <a href="#trick" class="nav-link">Candy</a>
          </li>
          <li class="nav-item">
            <a href="#new" class="nav-link">News</a>
          </li>

          <a href="#" class="button button-ghost">Support</a>
        </ul>

        <!-- close icon 关闭icon -->
        <div class="nav-close" id="nav-close">
          <i class="bx bx-x"></i>
        </div>

        <img src="./assets/img/nav-img.png" class="nav-img">
      </div>

      <!-- 导航切换 -->
      <div class="nav-toggle" id="nav-toggle">
        <i class="bx bx-grid-alt"></i>
      </div>
    </nav>
  </header>

  <!-- 主体区 -->
  <main class="main">
    <!-- Home -->
    <section class="home container" id="home">
      <div class="swiper home-swiper">
        <div class="swiper-wrapper">
          <!-- home silder 1 -->
          <section class="swiper-slide">
            <div class="home-content grid">
              <div class="home-group">
                <img src="./assets/img/home1-img.png" alt="" class="home-img">
                <div class="home-indicator"></div>

                <div class="home-details-img">
                  <h4 class="home-details-title">The Labu “Reiza”</h4>
                  <span class="home-details-subtitle">The Living Pumpkin</span>
                </div>
              </div>

              <div class="home-data">
                <h3 class="home-subtitle">#1 Top Scariest Ghost</h3>
                <h1 class="home-title">UOOOO <br> TRICK OR <br> TREAT!!</h1>
                <p class="home-description">Hi, I'm Reiza, people call me "El Labu". I am currently trying to learn
                  something new, building my own bike with parts made only in Malaysia.
                </p>

                <div class="home-buttons">
                  <a href="#" class="button">Book Now</a>
                  <a href="#" class="button-link button-flex">Track Record <i
                      class='bx bx-right-arrow-alt button-icon'></i></a>
                </div>
              </div>
            </div>
          </section>

          <!-- home slider 2 -->
          <section class="swiper-slide">
            <div class="home-content grid">
              <div class="home-group">
                <img src="./assets/img/home2-img.png" alt="" class="home-img">
                <div class="home-indicator"></div>

                <div class="home-details-img">
                  <h4 class="home-details-title">Adino & Grahami</h4>
                  <span class="home-details-subtitle">No words can describe them</span>
                </div>
              </div>

              <div class="home-data">
                <h3 class="home-subtitle">#2 top Best duo</h3>
                <h1 class="home-title">BRING BACK <br> MY COTTON <br> CANDY</h1>
                <p class="home-description">Adino steals cotton candy from his brother and eats them all in one bite,
                  a hungry beast. Grahami can no longer contain his anger towards Adino.
                </p>

                <div class="home-buttons">
                  <a href="#" class="button">Book Now</a>
                  <a href="#" class="button-link button-flex">Track Record <i
                      class='bx bx-right-arrow-alt button-icon'></i></a>
                </div>
              </div>
            </div>
          </section>

          <!-- home slider 3 -->
          <section class="swiper-slide">
            <div class="home-content grid">
              <div class="home-group">
                <img src="./assets/img/home3-img.png" alt="" class="home-img">
                <div class="home__indicator"></div>

                <div class="home-details-img">
                  <h4 class="home-details-title">Captain Sem</h4>
                  <span class="home-details-subtitle">Veteran Spooky Ghost</span>
                </div>
              </div>

              <div class="home-data">
                <h3 class="home-subtitle">#3 Top Scariest Ghost</h3>
                <h1 class="home-title">RESPAWN <br> THE SPOOKY <br> SKULL</h1>
                <p class="home-description">In search for cute little puppy, Captain Sem has come back from his tragic
                  death.
                  With his hogwarts certified power he promise to be a hero for all of ghostkind.
                </p>

                <div class="home-buttons">
                  <a href="#" class="button">Book Now</a>
                  <a href="#" class="button-link button-flex">Track Record <i
                      class='bx bx-right-arrow-alt button-icon'></i></a>
                </div>
              </div>
            </div>
          </section>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </section>

    <!-- Category -->
    <section class="section category">
      <h2 class="section-title">Favorite Scare <br> Category</h2>

      <div class="category-container container grid">
        <div class="category-data">
          <img src="./assets/img/category1-img.png" alt="" class="category-img">
          <h3 class="category-title">Ghosts</h3>
          <p class="category-description">Choose the ghosts, the scariest there are.</p>
        </div>

        <div class="category-data">
          <img src="./assets/img/category2-img.png" alt="" class="category-img">
          <h3 class="category-title">Pumpkins</h3>
          <p class="category-description">You look at the scariest pumpkins there is.</p>
        </div>

        <div class="category-data">
          <img src="./assets/img/category3-img.png" alt="" class="category-img">
          <h3 class="category-title">Witch Hat</h3>
          <p class="category-description">Pick the most stylish witch hats out there.</p>
        </div>
      </div>
    </section>

    <!-- About -->
    <section class="section about" id="about">
      <div class="about-container container grid">
        <div class="about-data">
          <h2 class="section-title about-title">About Halloween <br> Night</h2>
          <p class="about-description">Night of all the saints, or all the dead, is celebrated on October 31 and it is
            a
            very fun international celebration, this celebration comes from ancient origins, and is already
            celebrated by everyone.
          </p>
          <a href="#" class="button">Know more</a>
        </div>

        <img src="./assets/img/about-img.png" alt="" class="about-img">
      </div>
    </section>

    <!-- Trick -->
    <section class="section trick" id="trick">
      <h2 class="section-title">Trick Or Treat</h2>

      <div class="trick-container container grid">
        <div class="trick-content">
          <img src="./assets/img/trick-treat1-img.png" alt="" class="trick-img">
          <h3 class="trick-title">Toffee</h3>
          <span class="trick-subtitle">Candy</span>
          <span class="trick-price">$11.99</span>
          <button class="button trick-button">
            <i class='bx bx-cart-alt trick-icon'></i>
          </button>
        </div>

        <div class="trick-content">
          <img src="./assets/img/trick-treat2-img.png" alt="" class="trick-img">
          <h3 class="trick-title">Bone</h3>
          <span class="trick-subtitle">Accessory</span>
          <span class="trick-price">$8.99</span>
          <button class="button trick-button">
            <i class='bx bx-cart-alt trick-icon'></i>
          </button>
        </div>

        <div class="trick-content">
          <img src="./assets/img/trick-treat3-img.png" alt="" class="trick-img">
          <h3 class="trick-title">Scarecrow</h3>
          <span class="trick-subtitle">Accessory</span>
          <span class="trick-price">$15.99</span>
          <button class="button trick-button">
            <i class='bx bx-cart-alt trick-icon'></i>
          </button>
        </div>

        <div class="trick-content">
          <img src="./assets/img/trick-treat4-img.png" alt="" class="trick-img">
          <h3 class="trick-title">Candy Cane</h3>
          <span class="trick-subtitle">Candy</span>
          <span class="trick-price">$7.99</span>
          <button class="button trick-button">
            <i class='bx bx-cart-alt trick-icon'></i>
          </button>
        </div>

        <div class="trick-content">
          <img src="./assets/img/trick-treat5-img.png" alt="" class="trick-img">
          <h3 class="trick-title">Pumpkin</h3>
          <span class="trick-subtitle">Candy</span>
          <span class="trick-price">$19.99</span>
          <button class="button trick-button">
            <i class='bx bx-cart-alt trick-icon'></i>
          </button>
        </div>

        <div class="trick-content">
          <img src="./assets/img/trick-treat6-img.png" alt="" class="trick-img">
          <h3 class="trick-title">Ghost</h3>
          <span class="trick-subtitle">Accessory</span>
          <span class="trick-price">$17.99</span>
          <button class="button trick-button">
            <i class='bx bx-cart-alt trick-icon'></i>
          </button>
        </div>
      </div>
    </section>

    <!-- Discount -->
    <section class="section discount">
      <div class="discount-container container grid">
        <div class="discount-data">
          <h2 class="discount-title">50% Discount <br> On New Products</h2>
          <a href="#" class="button">Go to new</a>
        </div>

        <img src="./assets/img/discount-img.png" alt="" class="discount-img">
      </div>
    </section>

    <!-- New arrivals -->
    <section class="section new" id="new">
      <h2 class="section-title">New Arrivals</h2>

      <div class="new-container container">
        <div class="swiper new-swiper">
          <div class="swiper-wrapper">
            <div class="new-content swiper-slide">
              <div class="new-tag">New</div>
              <img src="./assets/img/new1-img.png" alt="" class="new-img">
              <h3 class="new-title">Haunted House</h3>
              <span class="new-subtitle">Accessory</span>

              <div class="new-prices">
                <span class="new-price">$14.99</span>
                <span class="new-discount">$29.99</span>
              </div>

              <button class="button new-button">
                <i class='bx bx-cart-alt new-icon'></i>
              </button>
            </div>

            <div class="new-content swiper-slide">
              <div class="new-tag">New</div>
              <img src="./assets/img/new2-img.png" alt="" class="new-img">
              <h3 class="new-title">Halloween Candle</h3>
              <span class="new-subtitle">Accessory</span>

              <div class="new-prices">
                <span class="new-price">$11.99</span>
                <span class="new-discount">$21.99</span>
              </div>

              <button class="button new-button">
                <i class='bx bx-cart-alt new-icon'></i>
              </button>
            </div>

            <div class="new-content swiper-slide">
              <div class="new-tag">New</div>
              <img src="./assets/img/new3-img.png" alt="" class="new-img">
              <h3 class="new-title">Witch Hat</h3>
              <span class="new-subtitle">Accessory</span>

              <div class="new-prices">
                <span class="new-price">$4.99</span>
                <span class="new-discount">$9.99</span>
              </div>

              <button class="button new-button">
                <i class='bx bx-cart-alt new-icon'></i>
              </button>
            </div>

            <div class="new-content swiper-slide">
              <div class="new-tag">New</div>
              <img src="./assets/img/new4-img.png" alt="" class="new-img">
              <h3 class="new-title">Rip</h3>
              <span class="new-subtitle">Accessory</span>

              <div class="new-prices">
                <span class="new-price">$24.99</span>
                <span class="new-discount">$44.99</span>
              </div>

              <button class="button new-button">
                <i class='bx bx-cart-alt new-icon'></i>
              </button>
            </div>

            <div class="new-content swiper-slide">
              <div class="new-tag">New</div>
              <img src="./assets/img/new5-img.png" alt="" class="new-img">
              <h3 class="new-title">Terrifying Crystal Ball</h3>
              <span class="new-subtitle">Accessory</span>

              <div class="new-prices">
                <span class="new-price">$5.99</span>
                <span class="new-discount">$12.99</span>
              </div>

              <button class="button new-button">
                <i class='bx bx-cart-alt new-icon'></i>
              </button>
            </div>

            <div class="new-content swiper-slide">
              <div class="new-tag">New</div>
              <img src="./assets/img/new6-img.png" alt="" class="new-img">
              <h3 class="new-title">Witch Broom</h3>
              <span class="new-subtitle">Accessory</span>

              <div class="new-prices">
                <span class="new-price">$7.99</span>
                <span class="new-discount">$14.99</span>
              </div>

              <button class="button new-button">
                <i class='bx bx-cart-alt new-icon'></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Our newsletter -->
    <section class="section newsletter">
      <div class="newsletter-container container">
        <h2 class="section-title">Our Newsletter</h2>
        <p class="newsletter-description">
          Promotion new products and sales. Directly to your inbox
        </p>

        <form action="" class="newsletter-form">
          <input type="text" placeholder="Enter your email" class="newsletter-input">
          <button class="button">
            Subscribe
          </button>
        </form>
      </div>
    </section>
  </main>

  <!-- 底部区 -->
  <footer class="footer section">
    <div class="footer-container container grid">
      <div class="footer-content">
        <a href="#" class="footer-logo">
          <img src="./assets/img/logo.png" alt="" class="footer-logo-img">
          Halloween
        </a>

        <p class="footer-description">Enjoy the scariest night <br> of your life.</p>

        <div class="footer-social">
          <a href="https://www.facebook.com/" target="_blank" class="footer-social-link">
            <i class='bx bxl-facebook'></i>
          </a>
          <a href="https://www.instagram.com/" target="_blank" class="footer-social-link">
            <i class='bx bxl-instagram-alt'></i>
          </a>
          <a href="https://twitter.com/" target="_blank" class="footer-social-link">
            <i class='bx bxl-twitter'></i>
          </a>
        </div>
      </div>

      <div class="footer-content">
        <h3 class="footer-title">About</h3>

        <ul class="footer-links">
          <li>
            <a href="#" class="footer-link">About Us</a>
          </li>
          <li>
            <a href="#" class="footer-link">Features</a>
          </li>
          <li>
            <a href="#" class="footer-link">News</a>
          </li>
        </ul>
      </div>

      <div class="footer-content">
        <h3 class="footer-title">Our Services</h3>

        <ul class="footer-links">
          <li>
            <a href="#" class="footer-link">Pricing</a>
          </li>
          <li>
            <a href="#" class="footer-link">Discounts</a>
          </li>
          <li>
            <a href="#" class="footer-link">Shipping mode</a>
          </li>
        </ul>
      </div>

      <div class="footer-content">
        <h3 class="footer-title">Our Company</h3>

        <ul class="footer-links">
          <li>
            <a href="#" class="footer-link">Blog</a>
          </li>
          <li>
            <a href="#" class="footer-link">About us</a>
          </li>
          <li>
            <a href="#" class="footer-link">Our mision</a>
          </li>
        </ul>
      </div>
    </div>

    <span class="footer-copy">&#169; Jetwang. All rigths reserved</span>

    <img src="./assets/img/footer1-img.png" alt="" class="footer-img-one">
    <img src="./assets/img/footer2-img.png" alt="" class="footer-img-two">
  </footer>

  <!-- scroll up -->
  <a href="#" class="scroll-up" id="scroll-up">
    <i class='bx bx-up-arrow-alt scroll-up-icon'></i>
  </a>


  <!-- scrollreveal -->
  <script src="./assets/js/scrollreveal.min.js"></script>

  <!-- swiper -->
  <script src="./assets/js/swiper-bundle.min.js"></script>

  <!-- main -->
  <script src="./assets/js/main.js"></script>
</body>

</html>